<template>
  <div id="job">
    <div class="job-top">
    <el-row id="hot_job" style="padding-top:30px">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="16"><div class="grid-content bg-purple">
      <el-row>
        <JobSearch></JobSearch>
      </el-row>
      </div>
      </el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    </div>
    <div class="job-bottom">
      <el-row id="hot_job" style=";padding-top:30px">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple">
          <el-row>
            <el-col :span="18"><JobResult :jobName="jobName"></JobResult></el-col>
            <el-col :span="6"><PhoneLogin></PhoneLogin>
            <div class="recruit_img">
              <el-image
                  style="width: 100%;height:160px"
                  :src="img"
                  fit="fit"></el-image>
            </div>
            </el-col>
          </el-row>
        </div>
        </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import JobSearch from "@/components/common/JobSearch";
import JobResult from "@/components/content/JobResult";
import PhoneLogin from "@/components/common/PhoneLogin";
import img from "@/assets/img/recruitBanner.png";
export default {
  name: "Job",
  components:{
    JobSearch,
    JobResult,
    PhoneLogin,
  },
  data(){
    return{
      img:img,
      jobName:''
    }
  },
  created() {
    this.jobName=this.$route.params.jobName;

  },
  methods:{

  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  font-size: 14px;
}
.job-top{
  background-color:white;
  height:170px;
}
.recruit_img{
  height:160px;
  margin-top:12px;
}
</style>